<template>
  <mars-dialog custom-class="zhyq-dialog" title="功能区列表" width="400" height="calc(100% - 90px)"
  :defaultFold="defaultFoldFlag" 
  :contractButton="true" 
  :closeButton="false" 
    :position="{ top: 30, left: 10 }">
    <div class="yjzy-content">
      <div class="search-list">
        <div class="container1" v-for="(item, index) in currentViewData" :key="index">
          <div class="container2">
            <span class="numSpan">{{ index + 1 }}</span>
            <div class="line1">
              {{ item.name }}
              <span class="typeLabel typeLabel_item">{{ item.regionTypeName }}区</span>
              <!-- <span class="typeLabel typeLabel_detail" @click="openDetail(item)">详情</span> -->
            </div>
            <div class="line2">区域面积: {{ item.area }} 平方米</div>
            <div class="line3">区域所属: {{ item.belongingTo }}</div>
          </div>
        </div>
        <div class="container1" v-if="!currentViewData.length">
          <p class="search-nodata">暂无数据</p>
        </div>
      </div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import { selectDictLabel } from "@mars/utils/common"
import { regionTypeMap } from "@mars/enums/CommonEnum"
import * as mapWork from "./map"
// 启用map.ts生命周期
useLifecycle(mapWork)
const defaultFoldFlag = ref(false)
const currentViewData = ref<any[]>([])
onMounted(async () => {
  // disable(["sb-query"])

  const data = await mapWork.getDivideList()

  currentViewData.value = data.map(item => {
    return {
      ...item,
      regionTypeName: selectDictLabel(regionTypeMap, item.regionType) ? selectDictLabel(regionTypeMap, item.regionType) : "其他"
    }
  })

  currentViewData.value.forEach((item) => {
    const routes = JSON.parse(item.routes)
    // console.log("routes=====", routes)
    const positions = routes.map(item => [item.x, item.y, item.z])
    const remarks = {
      名称: item.name,
      面积: item.area + "平方米",
      区域所属: item.belongingTo,
      暴露人口: item.population
      
    }
    mapWork.addSourceArea(positions, remarks, item.name)
  })

})

onUnmounted(() => {
  // 销毁操作
})
</script>
<style lang="less" scoped>
.yjzy-content {
  height: calc(100% - 20px);
  position: relative;
  box-sizing: border-box;
  margin-top: 10px;
  background: rgba(0, 48, 64, 0.4);
  border: 1px solid rgba(64, 108, 130, 0.4);
  border-radius: 5px;
  overflow-y: auto;
  overflow-x: hidden;

  .search-list {
    width: 100%;
    padding: 0 10px;
    margin-top: 10px;
    float: left;
    box-sizing: border-box;
  }

  .container1 {
    padding: 0 0 5px 0;

    &:after {
      content: "";
      width: 361px;
      height: 1px;
      position: absolute;
      left: 0;
      background: linear-gradient(90deg, rgba(0, 138, 255, 0) 0%, rgba(0, 138, 255, 0.98) 48%, rgba(0, 138, 255, 0) 100%);
      opacity: 0.4;
    }

    .typeLabel {
      color: #92b9cc;
      font-size: 12px;
      position: absolute;
      right: 0;
      top: 0;
    }

    .typeLabel_item {
      right: 10px;
    }

    .typeLabel_detail {
      color: #26ddff;

      &:hover {
        text-decoration: underline;
      }
    }

    .search-nodata {
      text-align: center;
    }
  }

  .container2 {
    cursor: pointer;
    position: relative;
    padding: 0 10px 5px 35px;

    .numSpan {
      position: absolute;
      left: -2px;
      top: 3px;
      padding-right: 3px;
      width: 33px;
      height: 16px;
      line-height: 16px;
      background: url("@mars/components/mars-ui/assets/images/zhyq/search-order.png") no-repeat center;
      background-size: 100% 100%;
      text-align: center;
      font-size: 12px;
      font-family: DIN;
      font-weight: 600;
      font-style: italic;
      color: #fff;
    }

    .line1 {
      color: #26ddff;
      padding-right: 30px;
      position: relative;
      margin-bottom: 5px;
    }

    .line2 {
      font-family: "宋体";
      color: #92bacd;
      font-size: 12px;
      line-height: 20px;
    }

    .line3 {
      font-family: "宋体";
      color: #92bacd;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>
